<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Home - Shikkaku</title>
	<link rel="shortcut icon" href="icon.ico"/>
	<link href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- 引入font awesomeCSS文件 -->
	<link rel="stylesheet" type="text/css" href="css/home.css"><!-- 引入CSS文件 -->
</head>
<body>
	<header class="clearfix">
		<div class="container clearfix">
			<div class="header-info">
				<div class="logo">
					<a href="javascript:void(0)"><img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/cmPp5FnMeUTDY24uMpF1Gui8XgouocQLXExjGx8RAys!/r/dD0BAAAAAAAA"/></a>
				</div>
				<div class="nav">
					<ul>
						<a href="javascript:void(0)"><li class="header-btn1">ABOUT ME</li></a>
						<a href="javascript:void(0)"><li class="header-btn2">RESUME</li></a>
						<a href="javascript:void(0)"><li class="header-btn3">HOBBY</li></a>
						<a href="artical/artical1.html"><li class="header-btn4">ARTICAL</li></a>
						<a href="javascript:void(0)"><li class="header-btn5">CONTACT ME</li></a>
					</ul>
				</div>
			</div>
		</div>
		<div class="header-mask">
			
		</div>
	</header>

	<div class="banner">
		<div class="banner-container">
			<div class="banner-img">
				<img class="active" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/qahCxd8PuhK4*HfJooaZLHImsyDardU.uCiUHioKge8!/r/dDwBAAAAAAAA"/>
				<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/3bXzG.uSOKnOcH0kv8NnHa72Jmmf.r4MyjLWNkAP5JM!/r/dG0BAAAAAAAA"/>
				<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/YjUcz5UC5s5Ge.3EGkzLvcYg3PA3*MTnGBokubGhHUw!/r/dG0BAAAAAAAA"/>
				<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/xi.jyR28wnnJ9AT.iuqgEw4GNjPhnW8PxPQuloO9NLI!/r/dGcBAAAAAAAA"/>
			</div>
			<div class="banner-p">
				<div class="banner-p1 active">简历页面的设计、修图<br/>代码、文案、排版<br/>均为独自完成</div>
				<div class="banner-p2">简历页面中<br/>有九张图片是自己的拍摄作品</div>
				<div class="banner-p3">简历页面最小宽度为1400px</div>
				<div class="banner-p4">轮播图和文章仅用于排版<br/>形式大于意义</div>
			</div>
		</div>
		<div class="banner-btn">
			<span class="active"></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>

	<div class="about-me" id="about-me">
		<div class="container clearfix">
			<div class="img-area">
				<div class="img-item">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/2rMpX0MMdAnsduMRT6d5xzW.cklR.cULwuK0jRiP1x8!/r/dGwBAAAAAAAA">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/tYkfzq3sZuDIj3xX3VDgpd9FoETH.221lhGQegOLAzg!/r/dD0BAAAAAAAA">
				</div>
			</div>
			<div class="text-area">
				<div class="text-logo">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/cmPp5FnMeUTDY24uMpF1Gui8XgouocQLXExjGx8RAys!/r/dD0BAAAAAAAA"/>
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/nvmSeKLnbJp75lRQjPAKRDQ.kZp7nxnnKAk7SCsXOz8!/r/dG0BAAAAAAAA"/>
					<p>
						尹浩，性取向女<br/>
						勉强抓住95年边缘的95后<br/>
						平凡的唯物论尊崇者<br/>
						满怀理想主义的晚期中二病<br/>
						半身探入二次元的妄想症<br/>
						日系狂热信徒<br/>
						挂过八种数学课<br/>
						热爱语言与文字的理科生界的耻辱<br/>
						<br/>
						<span>相信人一定要有梦想</span>
					</p>
					<p class="dream">反正，你也实现不了</p>
				</div>
			</div>
		</div>
	</div>

	<div class="trans-backs">
		<img class="trans-img1" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/n4QBWV1FlegcVyOS4Jy7GzIFejNO*ePq9WkRdD6OO2s!/r/dD0BAAAAAAAA"/>
		<img class="trans-img2" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/OFsr*kfBMAyvvkCeA.Che1kyiMHxZqkRLoEMltYFznE!/r/dDwBAAAAAAAA"/>
	</div>

	<div class="back-area1">
		<div class="back-info">
			<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/XVcjC6fc6wovABqZewD0vqRKdNks9.oEheQZY8jrpOU!/r/dD0BAAAAAAAA">
			<p>
				Shikkaku，日文的“失格”<br/>
				最初见于太宰治《人间失格》<br/>
				意为“丧失了xx的资格”<br/>
				选用这个词作为简历页面的LOGO<br/>
				原因大概是当年曲解此词含义的中二魂在作祟吧
			</p>
		</div>
	</div>

	<div class="resume" id="resume">
		<div class="container clearfix">
			<div class="basic-info">
				<div class="item">
					<span class="fa fa-user"></span>
					<h3>基本信息</h3>
					<p>
						姓名：尹浩<br/>
						出生年月：1995/03<br/>
						地址：山东·青岛<br/>
					</p>
				</div>
				<div class="item">
					<span class="fa fa-mortar-board"></span>
					<h3>教育信息</h3>
					<p>
						最高学历：本科<br/>
						毕业院校：青岛大学<br/>
						毕业时间：2016/07<br/>
						专业：信息与计算科学
					</p>
				</div>
				<div class="item">
					<span class="fa fa-comments-o"></span>
					<h3>语言能力</h3>
					<p>
						
						日语：NJLPT 1级<br/>
						英语：CET 6级<br/>
					</p>
				</div>
			</div>
			<div class="more-info">
				<div class="item item1">
					<a target="_blank" href="http://www.bilibili.com/video/av3651288/"></a>
					<img class="cover-img" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/dO3rJ3j672*hxA*Jm3L0w2VDKfHFp06geL3RVsRknPo!/r/dG0BAAAAAAAA"/>
					<img class="cover-mask1" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/UfEKMuXx*pbHLu7hhYtO4OkvMV3XuUPkWPN0WSH2JO0!/r/dDwBAAAAAAAA"/>
					<img class="cover-text" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/ZtD*61R4ln5jhGSqiDRxM2C8TujSFELJDh3ssQqDHGc!/r/dGwBAAAAAAAA"/>
					<img class="cover-info" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/aponFRVpcoRAVYCFHeh4jCuOwI4tvgc8bO42AKm5THs!/r/dDwBAAAAAAAA"/>
				</div>
				<div class="item item2">
					<img class="cover-img" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/LAEPu0mJL.BRu1Z6a6TyYr1pAddRnwrEw*icu1NssBU!/r/dG4BAAAAAAAA"/>
					<img class="cover-mask2" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/UfEKMuXx*pbHLu7hhYtO4OkvMV3XuUPkWPN0WSH2JO0!/r/dDwBAAAAAAAA"/>
					<img class="cover-text" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/hiRt7OA2L0.bTchzvO2671yWUvzRjVnlov1S7Gyvpw4!/r/dD0BAAAAAAAA"/>
					<img class="cover-info" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/Hydmavyc*zyBr8I8sfZZ2dYuJv68bLPEOAbvEKhSIW4!/r/dD0BAAAAAAAA"/>
				</div>
				<div class="item item3">
					<img class="cover-img" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/bhd96CeJu3m.WOmt6uN4oDvPYzT0I1fDQjWYe7nU7ww!/r/dD0BAAAAAAAA"/>
					<img class="cover-mask3" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/kLcO5N36K9nyoRISjQvdvrEnlh3eokamIe9Ua6Ac7KE!/r/dDwBAAAAAAAA"/>
					<img class="cover-text" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/iRHiN7Qx.troF6uCZ1C2N5HlVHL6rkXwIWHU3n5Cs80!/r/dG0BAAAAAAAA"/>
					<img class="cover-info" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/D*XNijI4SIcE.Gp993P2Ydv8*V73YOXV8Owz2x23a6M!/r/dG0BAAAAAAAA"/>
				</div>
				<div class="item item4">
					<img class="cover-img" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/aHynowYUlbyHoIW27TOEFLKMf3iuzAdXvC.nA3qyDZg!/r/dDwBAAAAAAAA"/>
					<img class="cover-mask4" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/kLcO5N36K9nyoRISjQvdvrEnlh3eokamIe9Ua6Ac7KE!/r/dDwBAAAAAAAA"/>
					<img class="cover-text" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/dLwL3yhQ69fbYq1CmP3LLeOiJaSRGuhMFA8znx7IY2s!/r/dG0BAAAAAAAA"/>
					<img class="cover-info" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/OZb6TqR6bwmFxKnaENpwR4a8MkS5b.RyqIjmabo1LQg!/r/dD0BAAAAAAAA"/>
				</div>
			</div>
		</div>
	</div>

	<div class="hobby" id="hobby">
		<div class="container">
			<div class="hobby-title">
				<div class="hobby1">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/6SZ7alcHhhyQV2VHEcWT4ZtjKEkmA9MRxNXPUtq8at4!/r/dDwBAAAAAAAA">
				</div>
				<div class="hobby2">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/y4wfts5CMdbzgP81TySecdAjSv6gLeaPRzEFuZVXyUA!/r/dD0BAAAAAAAA">
				</div>
				<div class="hobby3">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/KthfcXfsFxlrAIZxxNRFpFl8pfV6LvRj78OISk1.I2I!/r/dDwBAAAAAAAA">
				</div>
				<div class="hobby4">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/ECdOmG2lsv4jav5oGIncy9PR3.EdQdTuT1MWSQVsj7I!/r/dDwBAAAAAAAA">
				</div>
				<div class="hobby5">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/Ck2ZnwS*TSaXsyW6F5TpsnZOqHnOvhOAtF4iBehxIJ8!/r/dGwBAAAAAAAA">
				</div>
				<div class="hobby6">
					<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/rNf.Ob4CmKCO7CRBmv1du9MKINPBHp8fcjAc1wphZRY!/r/dGwBAAAAAAAA">
				</div>
			</div>
			<div class="hobby-img">
				<div class="group1">
					<div class="hobby1">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/sDZ1plEfxfyNdzdY4TX.g3hr.vaMQfk7eb9mlWZKHis!/r/dDwBAAAAAAAA">
					</div>
					<div class="hobby2">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/mpBDrsd9yzQlNARuE*rJswMsW3Sw9vEPdYYkt34B5Es!/r/dD0BAAAAAAAA">
					</div>
					<div class="hobby3">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/ePWqi15FP3VZTRjec0LjellWSxadNp*dG4wmPmMXTh8!/r/dDwBAAAAAAAA">
					</div>
					<div class="hobby4">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/Diz03B8PrXPp0FrKc7WOtTCiY3pHgyMXQpUJl0*HND0!/r/dD0BAAAAAAAA">
					</div>
					<div class="hobby5">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/TP2g4xUIcSFfABWe2RQ9k.96RVz.R.6ZgQg7liOpJJU!/r/dGwBAAAAAAAA">
					</div>
					<div class="hobby6">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/wo5gyCq5WFvw23ejKHlsnPwB.61GoIWnxad.zYmCOsI!/r/dG0BAAAAAAAA">
					</div>
				</div>
				<div class="group2">
					<div class="hobby1">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/4FcvXYvy*nIZvpKMMbdAzFUnYNYxyTGdG.05sGvuKnQ!/r/dG0BAAAAAAAA">
					</div>
					<div class="hobby2">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/*VMZiKiY96TcIpPvGjWiOk805EvgLLGoTPHZPed89hI!/r/dD0BAAAAAAAA">
					</div>
					<div class="hobby3">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/nyG0xz9Clb769xsUFkFaEx3dhMhnQMTOQ0sNBZqGz6U!/r/dDwBAAAAAAAA">
					</div>
					<div class="hobby4">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/bWcJRvviOkLbIBes*qbKo.i3aAlU0fwrmS4TmrXW7V8!/r/dG0BAAAAAAAA">
					</div>
					<div class="hobby5">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/QJBnU4tdtsYp6sFC0UMOcd.StBBJ6bkMzUhHQjZ3D*A!/r/dD0BAAAAAAAA">
					</div>
					<div class="hobby6">
						<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/T0k*Po4iuJ8tJ*CmmFTOzmKbtrxkcjw3KlGqU4FfHHQ!/r/dD0BAAAAAAAA">
					</div>
				</div>
			</div>
			<div class="hobby-text">
				<div class="hobby1">
					<p>
						和未曾谋面的风景<br/>
						擦肩而过
					</p>
				</div>
				<div class="hobby2">
					<p>
						前游戏王/三国杀玩家<br/>
						炉石传说/昆特牌萌新<br/>
					</p>
				</div>
				<div class="hobby3">
					<p>
						用快门<br/>
						留住瞬间
					</p>
				</div>
				<div class="hobby4">
					<p>
						轻度宅/二次元<br/>
						百合控/幻想症
					</p>
				</div>
				<div class="hobby5">
					<p>
						日语/日剧/日漫粉<br/>
						相信语言是打开新世界的第一扇门
					</p>
				</div>
				<div class="hobby6">
					<p>
						用脚思考人生<br/>
						用文字记录生活
					</p>
				</div>
			</div>
			<div class="hobby-btn">
				<p>点击切换</p>
			</div>
		</div>
	</div>

	<div class="artical">
		<div class="container">
			<ul>
				<li>
					<span>[前端]</span>
					<a href="artical/artical1.html">关于简历页面的搭建</a>
				</li>
				<li>
					<span>[前端]</span>
					<a href="artical/artical2.html">tips笔记</a>
				</li>
				<li>
					<span>[脑洞]</span>
					<a href="artical/artical3.html">冬至</a>
				</li>
				<li>
					<span>[脑洞]</span>
					<a href="artical/artical4.html">龋齿</a>
				</li>
			</ul>
		</div>
	</div>

	<footer id="contact-me" class="contact-me">
		<div class="container">
			<h3>CONTACT ME</h3>
			<div class="footer-icon">
				<span class="fa fa-mobile"></span>
				<span class="fa fa-weibo"></span>
				<span class="fa fa-qq"></span>
				<span class="fa fa-weixin"></span>
			</div>
			<p>-  2017.06  -  All By Shikkaku</p>
			<div class="scan">
				<img class="scan1" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/oLckW28EvtxNSBPw8COtYpXYFeVsMwfH8uPuNBQsz9Q!/r/dD0BAAAAAAAA"></img>
				<img class="scan2" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/PTDPpGThKJ1NFuL7ZAPcXhaFBriu.7ZYCfDUeMA6ibA!/r/dD0BAAAAAAAA"></img>
				<img class="scan3" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/GPukg8SBmW31DaElpMoo88rWDPFRf0MUS6urSY4y6HE!/r/dD0BAAAAAAAA"></img>
				<img class="scan4" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/WmKZRDQCnhXS.hpVrq4j*VyHnFWCJ3kPf4mcFVxTjsw!/r/dDwBAAAAAAAA"></img>
			</div>
		</div>
	</footer>

	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 引入jQuery -->
	<script type="text/javascript" src="https://cdn.bootcss.com/move.js/0.5.0/move.min.js"></script><!-- 引入move.js -->
	<script type="text/javascript" src="js/home.js"></script><!-- 引入JS脚本文件 -->
</body>
</html>